<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    table{
      text-align: center;
      border-collapse: collapse;
      border:3px solid darkblue;
    }
    td{
      border:1px solid darkblue;
    }
  </style>
  <!-- 开发环境版本，包含了用帮助的命令行警告 -->
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="d1">
  <button v-on:click="show = !show">点击切换</button><br/>
  <h1 v-if="show">
    你好,if
  </h1>
  <h1 v-else>
    没有if
  </h1>
  <h1 v-show="show">
    你好,show
  </h1>

  <table border="1" width="500px" height="200px" align="center">
    <tr>
      <td>序号</td>
      <td>学号</td>
      <td>姓名</td>
      <td>性别</td>
      <td>年龄</td>
      <td>住址</td>
    </tr>
    <tr v-for="(stud,index) in students" :key="index" v-if="stud.sex == '男'">
      <td>{{index}}</td>
      <td>{{stud.sid}}</td>
      <td>{{stud.sname}}</td>
      <td>{{stud.sex}}</td>
      <td>{{stud.age}}</td>
      <td>{{stud.addr}}</td>
    </tr>
  </table>
</div>
</body>
</html>
<script>
  // v-if与v-show区别：
  // 1、前者当指定条件不成立时，直接删除组件
  // 2、后者当指定条件不成立时，会隐藏组件（display:none）
  new Vue({
    el: '#d1',
    data: {
      show:true,
      students: [
        {"sid": "1001", "sname": "张三", "sex": "男", "age": 20, "addr": "上海"},
        {"sid": "1002", "sname": "李四", "sex": "男", "age": 21, "addr": "杭州"},
        {"sid": "1003", "sname": "王五", "sex": "女", "age": 22, "addr": "深圳"},
      ]
    },
    methods: {}
  })
</script>
